<template>
  <div class="goodsinfo">
    <transition 
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
      <div class="ball" v-show="ballflag" ref="ball"></div>
    </transition>
    <!-- 商品轮播图 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :lunbotuList='lunbotuList' :isfull="false"></swiper>
        </div>
      </div>
      <!-- 这里面需要高度100%  宽度自适应 -->
    </div>
    <!-- 商品购买 -->
    <div class="mui-card">
      <div class="mui-card-header">{{ goodsInfo.title }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价：<del>￥{{ goodsInfo.market_price }}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{ goodsInfo.sell_price }}</span>
          </p>
            <p>购买数量:<numbox @getCount="getSelectedCount" :max="goodsInfo.stock_quantity"></numbox></p>
            <p>
              <mt-button type="primary" size="small">立即购买</mt-button>
              <mt-button type="danger" size="small" @click=" addToShopCar">加入购物车</mt-button>
            </p>
        </div>
      </div>
    </div>
    <!-- 商品参数 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{ goodsInfo.goods_no }}</p>
          <p>库存情况：{{ goodsInfo.stock_quantity }}</p>
          <p>上架时间：{{ goodsInfo.add_time | dateFormat }}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="getGoodsDesc(id)">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="getGoodsComment(id)">商品评论</mt-button>
      </div>
    </div>    
  </div>
</template>

<script>
  import swiper from '../subcomponents/swiper.vue'
  import numbox from '../subcomponents/goodsInfo_numbox.vue'

  export default {
    data () {
      return {
        lunbotuList:[],
        id: this.$route.params.id,   //将路由参数中的id挂载到data
        goodsInfo:{},
        ballflag: false,  //控制小球隐藏和显示
        selectedCount: 1
      }
    },
    created () {
      this.getLunBoList();
      this.getGoodsInfo();
    },
    methods: {
      getLunBoList () {
        this.$http.get('api/getthumimages/' + this.id).then( result => {
          if( result.body.status === 0 ) {
            //拿到数据后不要直接保存，应该先要将获取到的item.src替换成item.img ,
            // 因为我们抽离的组件中只有item.img
            result.body.message.forEach( item => {
              item.img = item.src
            } )
            this.lunbotuList = result.body.message;
          }
        } );
      },
      getGoodsInfo () {
        this.$http.get('api/goods/getinfo/' + this.id).then(result => {
          if( result.body.status === 0 ) {
            this.goodsInfo = result.body.message[0]
          }
        })
      },
      getGoodsDesc(id) {
        // 使用编程式导航 点击跳转
        this.$router.push({ name:'gooddesc', params: {id} })
      },
      getGoodsComment(id) {
        this.$router.push({ name:'goodcomment', params: {id} })
      },
      addToShopCar() {
        this.ballflag = !this.ballflag;
        // 在加入购物车的按钮上var一个对象，包含商品的各项信息
        var goodsinfo = {
          //{id:商品id, count:购买数量, price:商品价格, selected: false 是否被选中}
          id: this.id,
          count: this.selectedCount,
          price: this.goodsInfo.sell_price,
          selected: true
        }
        //将这个对象传递给store中的mutations
        this.$store.commit("addToCar", goodsinfo)
      },
      //下面是半场动画
      beforeEnter(el) {
        //0,0点就是小球最开始出现的位置
        el.style.transform = "translate(0, 0)"
      },
      enter(el, done) {
        //如果分辨率或者滚动条滚动的话，距离写死了后就是固定位置，不能满足重叠的样式
        //所以这里获取小球起始位置和终止位置坐标 相减得出运动的距离
        //如何获取位置？通过domObject.getBoundingClientRect()
        el.offsetWidth;
        const ballPosition = this.$refs.ball.getBoundingClientRect();
        //不是数据绑定方面的内容  可以适当操作一下dom元素
        const badgePosition = document.getElementById('badge').getBoundingClientRect();
        // console.log(ballPosition);
        // console.log(badgePosition);
        const yDistance = badgePosition.top - ballPosition.top;
        const xDistance = badgePosition.left - ballPosition.left;
        el.style.transform = `translate(${xDistance}px, ${yDistance}px)`;
        el.style.transition = "all 0.5s ease";
        done()
      },
      afterEnter(el) {
        this.ballflag = !this.ballflag;
      },
      getSelectedCount(count) {
        this.selectedCount = count;
        // console.log(`父组件拿到的值是===${this.selectedCount}`);
      }
    },
    components: {
      swiper,
      numbox
    }
  }
</script>

<style lang="scss" scoped>
  .goodsinfo {
    background-color: #eee;
    overflow: hidden;
    .ball {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
      z-index: 98;
      position: absolute;
      left: 140px;
      top: 410px;
    }
    .now_price {
      color: red;
      font-size: 16px;
      font-weight: bold;
    }
    .mui-card-footer {
      display: block;
      button {
        margin: 10px 0;
      }
    }
  }
</style>
